﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div class="page-header">
    <div class="pull-left">
        <ol class="breadcrumb visible-sm visible-md visible-lg">
            <li><a href="index.html"><i class="icon fa fa-home"></i>主页</a></li>
            <li class="active"><a href="#"><i class="fa fa-envelope"></i>项目模块</a></li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="panel">
            <div class="panel-heading bk-bg-primary">
                <h6><i class="fa fa-table red"></i><span class="break"></span>项目列表</h6>
                <div class="panel-actions">
                    <a  data-toggle="modal" data-target="#myModal"  class="bk-margin-5 btn btn-default  btn-sm" style="background-color:#ECEDF0">&nbsp;&nbsp;新增项目&nbsp;&nbsp;</a>
                </div>
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>
                                    编号
                                </th>
                                <th>项目名称</th>
                                <th>项目负责人</th>
                                <th>项目创建日期</th>
                                <th>项目进度</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    1
                                </td>
                                <td>Willson</td>
                                <td>Developer</td>
                                <td>2563$</td>
                                <td>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
                                            45%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    2
                                </td>
                                <td>James</td>
                                <td>SEO</td>
                                <td>5000$</td>
                                <td>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
                                            80%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    3
                                </td>
                                <td>Steven</td>
                                <td>Photographer</td>
                                <td>1269$</td>
                                <td>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
                                            30%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    4
                                </td>
                                <td>Aselay</td>
                                <td>Project manger</td>
                                <td>6253$</td>
                                <td>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
                                            95%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="bk-margin-5 btn-group" style="float:right">
                    <button type="button" class="btn btn-info">1</button>
                    <button type="button" class="btn btn-default">2</button>
                    <button type="button" class="btn btn-default">3</button>
                    <button type="button" class="btn btn-default">4</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    
<link href="~/Assets/plugins/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" />
<link href="~/Assets/plugins/bootstrap-datepicker/css/datepicker-theme.css" rel="stylesheet" />
<script src="~/Assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="~/Assets/plugins/chosen/chosen.jquery.min.js"></script>
<script src="~/Assets/js/pages/form-elements.js"></script>

    <script>
        
        window.onload = function () {
            $("#datetimepicker").datepicker();
        };
    </script>

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    新增项目
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <label class="col-md-3 control-label" for="text-input">项目名称</label>
                    <div class="col-md-9">
                        <input id="text-input"  style="border-color:cornflowerblue" name="text-input" class="form-control" placeholder="Text" type="text">
                    </div>
                </div>
                <br />

                <div class="row">
                    <label class="col-md-3 control-label" for="text-input">项目编号：</label>
                    <div class="col-md-9">
                        <input id="text-input"  style="border-color:cornflowerblue" name="text-input" class="form-control" placeholder="Text" type="text">
                    </div>
                </div>
                <br />
                
                <div class="row">
                    <label class="col-md-3 control-label">负责人：</label>
                    <div class="col-md-9">

                        <select  style="border-color:cornflowerblue" class="form-control select2">
                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                            </optgroup>
                            <optgroup label="Pacific Time Zone">
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </optgroup>
                            <optgroup label="Central Time Zone">
                                <option value="AL">Alabama</option>
                                <option value="AR">Arkansas</option>
                            </optgroup>
                            <optgroup label="Eastern Time Zone">
                                <option value="CT">Connecticut</option>
                                <option value="DE">Delaware</option>
                                <option value="FL">Florida</option>
                                <option value="GA">Georgia</option>
                            </optgroup>
                        </select>                        
                    </div>
                </div>
                
                <br />

                <div class="row">
                    <label class="col-md-3 control-label">项目人员：</label>
                    <div class="col-md-9">

                        <select  style="border-color:cornflowerblue" class="form-control select2">
                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                            </optgroup>
                            <optgroup label="Pacific Time Zone">
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </optgroup>
                            <optgroup label="Central Time Zone">
                                <option value="AL">Alabama</option>
                                <option value="AR">Arkansas</option>
                            </optgroup>
                            <optgroup label="Eastern Time Zone">
                                <option value="CT">Connecticut</option>
                                <option value="DE">Delaware</option>
                                <option value="FL">Florida</option>
                                <option value="GA">Georgia</option>
                            </optgroup>
                        </select>
                    </div>
                </div>

                <br />

                <div class="row">
                    <label class="col-md-3 control-label">截至日期：</label>
                    <div class="col-md-9">
                        <div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                            <input  style="border-color:cornflowerblue" class="form-control" size="16" type="text" value="12-02-2012">
                            <span class="add-on"><i class="icon-th"></i></span>
                        </div>            
                       
                    </div>
                </div>

                <br />

                <div class="row">
                    <label class="col-md-3 control-label" for="text-input">功能描述：</label>
                    <div class="col-md-9">
                        <textarea id="textarea-input" name="textarea-input" rows="5" class="form-control" placeholder="Content.."></textarea>
                    </div>
                </div>

                <br />

                <div class="row">
                    <label class="col-md-3 control-label" for="text-input">业务主管部门：</label>
                    <div class="col-md-9">
                        <input id="text-input" name="text-input" class="form-control" placeholder="Text" type="text">
                    </div>
                </div>
                <br />

                <div class="row">
                    <label class="col-md-3 control-label" for="text-input">业务联系人：</label>
                    <div class="col-md-9">
                        <input id="text-input" name="text-input" class="form-control" placeholder="Text" type="text">
                    </div>
                </div>
                <br />

                <div class="row">
                    <label class="col-md-3 control-label" for="text-input">业务联系人电话：</label>
                    <div class="col-md-9">
                        <input id="text-input" name="text-input" class="form-control" placeholder="Text" type="text">
                    </div>
                </div>
                <br />

                <div class="row">
                    <label class="col-md-3 control-label">业务类型：</label>
                    <div class="col-md-9">

                        <select class="form-control select2">
                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                            </optgroup>
                            <optgroup label="Pacific Time Zone">
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </optgroup>
                            <optgroup label="Central Time Zone">
                                <option value="AL">Alabama</option>
                                <option value="AR">Arkansas</option>
                            </optgroup>
                            <optgroup label="Eastern Time Zone">
                                <option value="CT">Connecticut</option>
                                <option value="DE">Delaware</option>
                                <option value="FL">Florida</option>
                                <option value="GA">Georgia</option>
                            </optgroup>
                        </select>
                    </div>
                </div>

                <br />

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>